{% extends "base.html" %}

{% load i18n %}
{% load static %}

{% block title %}{% trans "Sustainability" %}{% endblock %}

{% block extra_links %}
  <link rel="stylesheet" href="{% static 'payments/css/form.css' %}" />
{% endblock %}

{% block extra_scripts %}
  <script src="https://js.stripe.com/v2/" type="text/javascript"></script>
  <script type="text/javascript" src="{% static 'vendor/knockout.js' %}"></script>
  <script type="text/javascript" src="{% static 'donate/js/donate.js' %}"></script>
  <script type="text/javascript">
var donate_views = require('donate/donate');
$(document).ready(function () {
    var key;
    //<![CDATA[
    key = '{{ stripe_publishable }}';
    //]]>

    var view = donate_views.DonateView.init({
      key: key,
      form: $('form#donate-payment')
    });
});
  </script>
{% endblock %}


{% block content %}
  <h2>Donate to Read the Docs</h2>

  <p>
    Contributions will be listed on our donation page, with your name and
    photo (from Gravatar). You can choose to donate privately if you do not wish to be listed.
    We do not store your credit card details,
    payment is processed directly through <a href="https://stripe.com">Stripe</a>.
  </p>

  <form action="" method="post" id="donate-payment" class="payment">
    {% csrf_token %}

    {{ form.non_field_errors }}

    {% for field in form.fields_with_cc_group %}
      {% if field.is_cc_group %}
        <div class="subscription-card">
          {% for groupfield in field.fields %}
            {% include 'core/ko_form_field.html' with field=groupfield %}
          {% endfor %}
        </div>
      {% elif field.name == 'logo_url' or field.name == 'site_url' %}
        <div data-bind="visible: urls_enabled">
          {% include 'core/ko_form_field.html' with field=field %}
        </div>
      {% elif field.name == 'dollars' %}
        {{ field.errors }}
        <p>
          <label for="{{ field.id_for_label }}">{{ field.label }}</label>
          <input
              type="hidden"
              name="{{ field.name }}"
              id="{{ field.id_for_label }}"
              data-bind="value: dollars" />
          <input
              type="number"
              data-bind="textInput: dollars_input, visible: dollars_select() == 'custom'"
              value="50"
              id="id_dollars_input"
              style="display: none;" />
          <select data-bind="value: dollars_select, visible: dollars_select() != 'custom'">
            <option value="custom">{% trans "Custom amount" %}</option>
            <option value="5">$5</option>
            <option value="10">$10</option>
            <option value="25">$25</option>
            <option value="50" selected>{% trans "1 Hour" %} ($50)</option>
            <option value="100">{% trans "2 Hours" %} ($100)</option>
            <option value="200">{% trans "4 Hours" %} ($200)</option>
            <option value="400">{% trans "1 Day" %} ($400)</option>
            <option value="800">{% trans "2 Days" %} ($800)</option>
            <option value="1200">{% trans "3 Days" %} ($1200)</option>
            <option value="1600">{% trans "4 Days" %} ($1600)</option>
            <option value="2000">{% trans "5 Days" %} ($2000)</option>
            <option value="4000">{% trans "2 Weeks" %} ($4000)</option>
            <option value="6000">{% trans "3 Weeks" %} ($6000)</option>
            <option value="8000">{% trans "4 Weeks" %} ($8000)</option>
          </select>
          {% if field.help_text %}
            <span class="helptext">{{ field.help_text }}</span>
          {% endif %}
        </p>
      {% else %}
        {% include 'core/ko_form_field.html' with field=field %}
      {% endif %}
    {% endfor %}

    {% trans "Donate" as form_submit_text %}
    <input type="submit" value="{{ form_submit_text }}" data-bind="click: process_form" />
  </form>
{% endblock %}
